सीएसएस ग्रिड टेम्प्लेट कॉलम्स: डायनामिक कॉलम परिभाषा में महारत हासिल करना

सीएसएस ग्रिड ने वेब लेआउट में क्रांति ला दी है, जो अभूतपूर्व नियंत्रण और लचीलापन प्रदान करता है। इसकी मुख्य विशेषताओं में से एक grid-template-columns प्रॉपर्टी है, जो आपको अपने ग्रिड के कॉलम की संरचना को परिभाषित करने की अनुमति देती है। इस प्रॉपर्टी का प्रभावी ढंग से उपयोग कैसे करें, यह समझना उत्तरदायी और गतिशील लेआउट बनाने के लिए महत्वपूर्ण है जो विभिन्न स्क्रीन आकारों और सामग्री आवश्यकताओं के अनुकूल होते हैं।

grid-template-columns को समझना

grid-template-columns प्रॉपर्टी एक ग्रिड कंटेनर में कॉलम की संख्या और चौड़ाई निर्दिष्ट करती है। आप विभिन्न इकाइयों का उपयोग करके कॉलम आकार परिभाषित कर सकते हैं, जिनमें शामिल हैं:

• निश्चित लंबाई: पिक्सल (px), पॉइंट्स (pt), सेंटीमीटर (cm), मिलीमीटर (mm), इंच (in)
• सापेक्ष लंबाई: Ems (em), rems (rem), व्यूपोर्ट चौड़ाई (vw), व्यूपोर्ट ऊंचाई (vh)
• भिन्नात्मक इकाई: fr (ग्रिड कंटेनर में उपलब्ध स्थान के एक अंश का प्रतिनिधित्व करता है)
• कीवर्ड: auto, min-content, max-content, minmax()

आइए एक बुनियादी उदाहरण से शुरू करें:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

यह कोड तीन कॉलम वाला एक ग्रिड बनाता है। पहला और तीसरा कॉलम उपलब्ध स्थान का 1/4 हिस्सा लेता है, जबकि दूसरा कॉलम 2/4 (या 1/2) हिस्सा लेता है।

निश्चित बनाम सापेक्ष इकाइयाँ

निश्चित और सापेक्ष इकाइयों के बीच चयन आपके डिजाइन लक्ष्यों पर निर्भर करता है। पिक्सल जैसी निश्चित इकाइयाँ कॉलम की चौड़ाई पर सटीक नियंत्रण प्रदान करती हैं, लेकिन वे लेआउट को कम लचीला और उत्तरदायी बना सकती हैं। दूसरी ओर, सापेक्ष इकाइयाँ कॉलम को स्क्रीन आकार या सामग्री के साथ आनुपातिक रूप से स्केल करने की अनुमति देती हैं।

निश्चित इकाइयाँ (Pixels): पिक्सल का उपयोग तब करें जब आपको किसी तत्व को एक विशिष्ट, अपरिवर्तनीय आकार का होना चाहिए। यह एक उत्तरदायी ग्रिड लेआउट में कॉलम के लिए कम आम है, लेकिन विशिष्ट ब्रांडिंग आवश्यकताओं वाले तत्वों के लिए उपयोगी हो सकता है। उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 150px 300px;
}

            

              
                Copy
              
            
          

सापेक्ष इकाइयाँ (Ems, Rems, Viewport Units): ये इकाइयाँ अधिक लचीली होती हैं। em और rem फ़ॉन्ट आकार के सापेक्ष होते हैं, जिससे तत्वों को बेहतर पहुंच के लिए टेक्स्ट आकार के साथ स्केल करने की अनुमति मिलती है। vw और vh व्यूपोर्ट आकार के सापेक्ष होते हैं, जो विभिन्न स्क्रीन आयामों के अनुकूल लेआउट को सक्षम करते हैं। उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

भिन्नात्मक इकाई (fr)

fr इकाई लचीले ग्रिड लेआउट बनाने के लिए एक शक्तिशाली उपकरण है। यह ग्रिड कंटेनर में उपलब्ध स्थान के एक अंश का प्रतिनिधित्व करता है जब अन्य सभी निश्चित आकार के कॉलम का हिसाब कर लिया गया हो। यह शेष स्थान को आनुपातिक रूप से वितरित करने के लिए इसे आदर्श बनाता है।

इस उदाहरण पर विचार करें:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

            

              
                Copy
              
            
          

यहां, पहला कॉलम 100 पिक्सल चौड़ा है। शेष स्थान को फिर दूसरे और तीसरे कॉलम के बीच विभाजित किया जाता है, जिसमें दूसरा कॉलम शेष स्थान का 1/3 और तीसरा कॉलम 2/3 हिस्सा लेता है।

कीवर्ड: auto, min-content, max-content

सीएसएस ग्रिड कॉलम की चौड़ाई को परिभाषित करने के लिए कई कीवर्ड प्रदान करता है:

• auto: ब्राउज़र स्वचालित रूप से अपनी सामग्री के आधार पर कॉलम की चौड़ाई की गणना करता है।
• min-content: कॉलम की चौड़ाई को उसकी सामग्री को बिना ओवरफ्लो किए रखने के लिए आवश्यक न्यूनतम आकार पर सेट किया जाता है। इसका मतलब लंबे शब्दों को रैप करना हो सकता है।
• max-content: कॉलम की चौड़ाई को उसकी सामग्री को बिना रैपिंग के रखने के लिए आवश्यक अधिकतम आकार पर सेट किया जाता है। यह संभव हो तो शब्दों को नई लाइनों पर रैप होने से रोकेगा।

auto का उपयोग करके उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

            

              
                Copy
              
            
          

इस मामले में, पहले और तीसरे कॉलम अपनी सामग्री को फिट करने के लिए अपनी चौड़ाई समायोजित करेंगे, जबकि दूसरा कॉलम शेष स्थान ले लेगा।

min-content और max-content का उपयोग करके उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

पहला कॉलम केवल उतना ही चौड़ा होगा जितना उसकी सामग्री का सबसे छोटा टुकड़ा निर्देशित करता है, जबकि दूसरा कॉलम यदि संभव हो तो अपनी सभी सामग्री को एक पंक्ति में फिट करने के लिए विस्तृत होगा।

minmax() फंक्शन

minmax() फ़ंक्शन आपको एक कॉलम के लिए न्यूनतम और अधिकतम आकार निर्दिष्ट करने की अनुमति देता है। यह उन कॉलमों को बनाने के लिए विशेष रूप से उपयोगी है जो उपलब्ध स्थान को भरने के लिए विस्तार कर सकते हैं लेकिन एक निश्चित आकार से नीचे नहीं सिकुड़ते हैं।

सिंटेक्स:

            minmax(min, max)

            

              
                Copy
              
            
          

उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(200px, 1fr) 100px;
}

            

              
                Copy
              
            
          

इस उदाहरण में, पहले और तीसरे कॉलम 100 पिक्सल पर निश्चित हैं। दूसरे कॉलम की न्यूनतम चौड़ाई 200 पिक्सल और अधिकतम चौड़ाई है जो इसे शेष स्थान का विस्तार करने और भरने की अनुमति देती है। यदि शेष स्थान 200px से कम है, तो दूसरा कॉलम 200px चौड़ा होगा और ग्रिड ओवरफ्लो हो सकता है या कॉलम आनुपातिक रूप से सिकुड़ सकते हैं (ग्रिड की समग्र बाधाओं के आधार पर)।

repeat() के साथ कॉलम परिभाषाओं को दोहराना

repeat() फ़ंक्शन दोहराए जाने वाले कॉलम पैटर्न को परिभाषित करने को सरल बनाता है। यह दो तर्क लेता है: पैटर्न को दोहराने की संख्या और स्वयं पैटर्न।

सिंटेक्स:

            repeat(number, pattern)

            

              
                Copy
              
            
          

उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

यह कोड इसके बराबर है:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

आप repeat() को अन्य इकाइयों और कीवर्ड के साथ भी जोड़ सकते हैं:

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr 200px) auto;
}

            

              
                Copy
              
            
          

यह निम्नलिखित कॉलम संरचना के साथ एक ग्रिड बनाता है: 100px, 1fr, 200px, 1fr, 200px, auto।

repeat() के साथ auto-fill और auto-fit का उपयोग करना

repeat() के साथ उपयोग किए जाने वाले auto-fill और auto-fit कीवर्ड गतिशील कॉलम बनाते हैं जो स्वचालित रूप से उपलब्ध स्थान के अनुसार समायोजित होते हैं। वे उत्तरदायी गैलरी या सूची बनाने के लिए विशेष रूप से उपयोगी हैं।

• auto-fill: कंटेनर को ओवरफ्लो किए बिना यथासंभव अधिक से अधिक कॉलम बनाता है, भले ही कुछ कॉलम खाली हों।
• auto-fit: auto-fill के समान, लेकिन खाली कॉलम को 0 चौड़ाई तक संक्षिप्त करता है, जिससे अन्य कॉलम उपलब्ध स्थान को भरने के लिए विस्तार कर सकते हैं।

auto-fill का उपयोग करके उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

यह यथासंभव अधिक से अधिक कॉलम बनाता है, प्रत्येक की न्यूनतम चौड़ाई 200 पिक्सल और अधिकतम चौड़ाई होती है जो उन्हें उपलब्ध स्थान को भरने की अनुमति देती है। यदि सभी कॉलम भरने के लिए पर्याप्त सामग्री नहीं है, तो कुछ कॉलम खाली रहेंगे, लेकिन वे अभी भी जगह लेंगे।

auto-fit का उपयोग करके उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

यह auto-fill के समान काम करता है, लेकिन यदि खाली कॉलम हैं, तो वे 0 चौड़ाई तक संक्षिप्त हो जाएंगे, और शेष कॉलम स्थान को भरने के लिए विस्तृत होंगे। उत्तरदायी ग्रिड के लिए यह अक्सर वांछित व्यवहार होता है।

नामित ग्रिड लाइन्स

आप ग्रिड लाइनों को नाम दे सकते हैं, जो आपके कोड को अधिक पठनीय और रखरखाव योग्य बना सकता है। यह grid-template-columns (और grid-template-rows) प्रॉपर्टी को परिभाषित करते समय नामों को वर्गाकार कोष्ठक में संलग्न करके किया जाता है।

उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

इस उदाहरण में, हमने पहली ग्रिड लाइन को col-start, दूसरी ग्रिड लाइन को col-2, और तीसरी ग्रिड लाइन को col-end नाम दिया है। फिर आप grid-column-start, grid-column-end, grid-row-start, और grid-row-end प्रॉपर्टी का उपयोग करके ग्रिड आइटम रखते समय इन नामों का उपयोग कर सकते हैं।

            .grid-item {
  grid-column-start: col-start;
  grid-column-end: col-2;
}

            

              
                Copy
              
            
          

यह ग्रिड आइटम को col-start लाइन से शुरू करके col-2 लाइन पर समाप्त करता है।

व्यावहारिक उदाहरण और उपयोग के मामले

यहां कुछ व्यावहारिक उदाहरण दिए गए हैं कि वास्तविक दुनिया के परिदृश्यों में grid-template-columns का उपयोग कैसे करें:

1. उत्तरदायी नेविगेशन बार

एक नेविगेशन बार जो विभिन्न स्क्रीन आकारों के अनुकूल होता है:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Styles for logo */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Styles for search bar */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, नेवबार में तीन कॉलम हैं: एक लोगो के लिए (auto), एक नेविगेशन लिंक के लिए (1fr), और एक सर्च बार के लिए (auto)। छोटी स्क्रीन पर, ग्रिड एक ही कॉलम में संक्षिप्त हो जाता है, और नेविगेशन लिंक लंबवत रूप से स्टैक हो जाते हैं।

2. इमेज गैलरी

एक उत्तरदायी इमेज गैलरी जिसमें लचीली संख्या में कॉलम हों:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Styles for gallery items */
}

            

              
                Copy
              
            
          

यह एक इमेज गैलरी बनाता है जिसमें कॉलम कम से कम 250 पिक्सल चौड़े होते हैं और उपलब्ध स्थान को भरने के लिए विस्तार करते हैं। auto-fit कीवर्ड यह सुनिश्चित करता है कि खाली कॉलम संक्षिप्त हो जाएं, और छवियां कंटेनर को अच्छी तरह से भर दें।

3. साइडबार के साथ दो-कॉलम लेआउट

एक निश्चित-चौड़ाई वाले साइडबार और एक लचीले मुख्य सामग्री क्षेत्र के साथ एक क्लासिक दो-कॉलम लेआउट:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Styles for sidebar */
}

.main-content {
  /* Styles for main content */
}

            

              
                Copy
              
            
          

साइडबार की एक निश्चित चौड़ाई 250 पिक्सल है, जबकि मुख्य सामग्री क्षेत्र शेष स्थान लेता है।

4. नामित ग्रिड क्षेत्रों के साथ जटिल लेआउट

अधिक जटिल लेआउट के लिए, आप अपने ग्रिड के विशिष्ट क्षेत्रों को परिभाषित करने के लिए grid-template-columns को grid-template-areas के साथ जोड़ सकते हैं।

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Styles for header */
}

.sidebar {
  grid-area: sidebar;
  /* Styles for sidebar */
}

.main {
  grid-area: main;
  /* Styles for main content */
}

.footer {
  grid-area: footer;
  /* Styles for footer */
}

            

              
                Copy
              
            
          

यह उदाहरण एक हेडर, साइडबार, मुख्य सामग्री क्षेत्र और फुटर के साथ एक ग्रिड को परिभाषित करता है। grid-template-areas प्रॉपर्टी इन तत्वों को विशिष्ट क्षेत्र प्रदान करती है। कॉलम परिभाषाएं पठनीयता में सुधार के लिए नामित ग्रिड लाइनों का उपयोग करती हैं।

अभिगम्यता विचार

सीएसएस ग्रिड का उपयोग करते समय, अभिगम्यता पर विचार करना महत्वपूर्ण है। सुनिश्चित करें कि आपके लेआउट विकलांग उपयोगकर्ताओं के लिए तार्किक और नौगम्य हैं। अभिगम्यता को बढ़ाने के लिए सिमेंटिक HTML तत्वों का उपयोग करें और उचित ARIA विशेषताएँ प्रदान करें। उदाहरण के लिए, टैब क्रम का ध्यान रखें और सुनिश्चित करें कि सामग्री को तार्किक क्रम में प्रस्तुत किया गया है, भले ही ग्रिड के साथ इसे दृष्टिगत रूप से पुनर्व्यवस्थित किया गया हो।

प्रदर्शन अनुकूलन

सीएसएस ग्रिड आम तौर पर प्रदर्शनकारी है, लेकिन प्रदर्शन को अनुकूलित करने के लिए आप कुछ चीजें कर सकते हैं:

• अत्यधिक नेस्टिंग से बचें: रेंडरिंग ओवरहेड को कम करने के लिए अपनी ग्रिड संरचनाओं को यथासंभव सरल रखें।
• हार्डवेयर त्वरण का उपयोग करें: रेंडरिंग प्रदर्शन को बेहतर बनाने के लिए हार्डवेयर त्वरण को ट्रिगर करने वाले CSS गुणों का उपयोग करें (जैसे, transform: translateZ(0))।
• छवियों को अनुकूलित करें: सुनिश्चित करें कि पृष्ठ लोड समय को कम करने के लिए आपकी छवियां ठीक से अनुकूलित हैं।
• विभिन्न उपकरणों पर परीक्षण करें: किसी भी प्रदर्शन समस्या की पहचान करने और उसे संबोधित करने के लिए विभिन्न उपकरणों और ब्राउज़रों पर अपने लेआउट का अच्छी तरह से परीक्षण करें।

सीएसएस ग्रिड लेआउट को डीबग करना

आधुनिक ब्राउज़र सीएसएस ग्रिड लेआउट को डीबग करने के लिए उत्कृष्ट डेवलपर टूल प्रदान करते हैं। क्रोम, फ़ायरफ़ॉक्स और एज में, आप ग्रिड कंटेनर का निरीक्षण कर सकते हैं और ग्रिड लाइनों, कॉलम की चौड़ाई और पंक्ति की ऊंचाइयों की कल्पना कर सकते हैं। ये उपकरण आपको लेआउट समस्याओं को जल्दी से पहचानने और हल करने में मदद कर सकते हैं।

grid-template-columns का उपयोग करने के लिए सर्वोत्तम अभ्यास

• अपने लेआउट की योजना बनाएं: कोडिंग शुरू करने से पहले, अपने ग्रिड लेआउट की सावधानीपूर्वक योजना बनाएं और प्रमुख क्षेत्रों और उनके वांछित आकारों की पहचान करें।
• सापेक्ष इकाइयों का उपयोग करें: उत्तरदायी लेआउट बनाने के लिए fr, em, और vw जैसी सापेक्ष इकाइयों को प्राथमिकता दें।
• minmax() का उपयोग करें: विभिन्न सामग्री और स्क्रीन आकारों के अनुकूल लचीले कॉलम आकार को परिभाषित करने के लिए minmax() फ़ंक्शन का उपयोग करें।
• repeat() का उपयोग करें: दोहराए जाने वाले कॉलम पैटर्न को सरल बनाने के लिए repeat() फ़ंक्शन का उपयोग करें।
• अभिगम्यता पर विचार करें: सुनिश्चित करें कि आपके लेआउट सभी उपयोगकर्ताओं के लिए सुलभ हैं।
• अच्छी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए कि वे अपेक्षा के अनुरूप काम करते हैं, विभिन्न उपकरणों और ब्राउज़रों पर अपने लेआउट का परीक्षण करें।
• स्वच्छ, रखरखाव योग्य कोड लिखें: अपने कोड को अधिक पठनीय और रखरखाव योग्य बनाने के लिए नामित ग्रिड लाइनों और टिप्पणियों का उपयोग करें।

निष्कर्ष

grid-template-columns प्रॉपर्टी लचीले, उत्तरदायी और गतिशील वेब लेआउट बनाने के लिए एक शक्तिशाली उपकरण है। उपलब्ध विभिन्न इकाइयों, कीवर्ड और फ़ंक्शन में महारत हासिल करके, आप सीएसएस ग्रिड की पूरी क्षमता को अनलॉक कर सकते हैं और आश्चर्यजनक वेब डिज़ाइन बना सकते हैं जो किसी भी स्क्रीन आकार और सामग्री की आवश्यकता के अनुकूल हों। इष्टतम परिणाम सुनिश्चित करने के लिए अपने लेआउट की सावधानीपूर्वक योजना बनाना, सापेक्ष इकाइयों का उपयोग करना, अभिगम्यता पर विचार करना और अच्छी तरह से परीक्षण करना याद रखें। इन सर्वोत्तम प्रथाओं का पालन करके, आप आधुनिक, उपयोगकर्ता-अनुकूल वेबसाइट बना सकते हैं जो सभी उपयोगकर्ताओं के लिए एक शानदार अनुभव प्रदान करती हैं।

अतिरिक्त संसाधन

• एमडीएन वेब डॉक्स: grid-template-columns
• सीएसएस-ट्रिक्स: सीएसएस ग्रिड के लिए एक संपूर्ण गाइड
• ग्रिड बाय एग्जांपल